<template>
  <view class="fun-flex-col page">
    <view class="fun-flex-col fun-self-stretch group_2">
      <view class="fun-flex-row fun-justify-center fun-self-stretch fun-relative">
        <view class="fun-self-center group_3 pos"></view>
        <image class="image_4" src="../../static/780f8b7d243597e062c5ffd5409ce556.png" />
      </view>
      <text class="fun-self-center font text_3 mt-11">Successful Purchase</text>
    </view>
    <view class="fun-flex-col fun-self-stretch group_4">
      <text class="fun-self-center font_2 text_4">You can check your funds at "My Positions".</text>
      <view class="fun-flex-col fun-self-stretch section mt-21">
        <view class="fun-flex-col fun-self-stretch">
          <view class="fun-flex-row fun-justify-between fun-items-center group_5">
            <text class="font_2 text_6">U.S. Growth Equity</text>
            <text class="font text_5">$30,000,00</text>
          </view>
          <view class="fun-flex-col group_6">
            <view class="fun-flex-row fun-items-center">
              <image class="image_5" src="../../static/9af61eadfcc58bb44b6a48b7610bf668.png" />
              <text class="font_2 text_7 ml-9">Confirmation of shares expected on T+1</text>
            </view>
            <view class="fun-flex-col group_7">
              <view class="fun-flex-row fun-items-center fun-self-stretch group_8">
                <view class="section_3"></view>
                <text class="font_2 ml-13">Expected to start viewing earnings on T+2</text>
              </view>
              <view class="fun-shrink-0 fun-self-start fun-relative section_2"></view>
            </view>
          </view>
        </view>
        <text class="fun-mt-24 fun-self-start font_2 text_8">Order No.:12345678</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {},
    data() {
      return {};
    },

    methods: {},
  };
</script>

<style scoped lang="scss">
  .ml-5 {
    margin-left: 10rpx;
  }
  .mt-11 {
    margin-top: 22rpx;
  }
  .mt-21 {
    margin-top: 42rpx;
  }
  .ml-9 {
    margin-left: 18rpx;
  }
  .ml-13 {
    margin-left: 26rpx;
  }
  .page {
    padding: 32rpx 32rpx 0;
    background-color: #00033b;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    .group {
      padding-left: 36rpx;
      .text {
        color: #ffffff;
        font-size: 30rpx;
        font-family: SF Pro Text;
        font-weight: 600;
      }
      .image {
        width: 34rpx;
        height: 22rpx;
      }
      .image_2 {
        width: 30rpx;
        height: 22rpx;
      }
      .image_3 {
        width: 48rpx;
        height: 22.66rpx;
      }
    }
    .text_2 {
      margin-top: 64rpx;
      color: #ffffff;
      font-size: 32rpx;
      font-family: SF Pro Display;
      font-weight: 300;
    }
    .group_2 {
      padding: 0 14rpx;
      .group_3 {
        filter: blur(3.5rpx);
        width: 214rpx;
        height: 8rpx;
      }
      .pos {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
      .image_4 {
        width: 80rpx;
        height: 80rpx;
      }
      .text_3 {
        font-weight: 300;
      }
    }
    .group_4 {
      margin-top: 72rpx;
      .font_2 {
        font-size: 24rpx;
        font-family: SF Pro Display;
        color: #ffffff;
      }
      .text_4 {
        font-weight: 100;
      }
      .section {
        padding: 28rpx 12rpx 28rpx 22rpx;
        background-color: #1b1d53;
        border-radius: 24rpx;
        border: solid 2rpx #ffffff33;
        .group_5 {
          padding-bottom: 24rpx;
          border-bottom: solid 2rpx #ffffff24;
        }
        .group_6 {
          padding-top: 24rpx;
          .image_5 {
            width: 32rpx;
            height: 32rpx;
          }
          .text_7 {
            font-weight: 700;
            line-height: 21.88rpx;
          }
          .group_7 {
            padding: 0 8rpx;
            height: 86.6rpx;
            .group_8 {
              margin-top: 64rpx;
              .section_3 {
                background-color: #ffffff33;
                border-radius: 50%;
                width: 16rpx;
                height: 16rpx;
                border-left: solid 2rpx #ffffff1a;
                border-right: solid 2rpx #ffffff1a;
                border-top: solid 2rpx #ffffff1a;
                border-bottom: solid 2rpx #ffffff1a;
              }
            }
            .section_2 {
              margin-left: 8rpx;
              margin-top: -88rpx;
              background-color: #5b5c83;
              width: 2rpx;
              height: 68rpx;
            }
          }
        }
        .text_8 {
          font-size: 22rpx;
          font-weight: 300;
          line-height: 16rpx;
        }
      }
    }
    .font {
      font-size: 28rpx;
      font-family: SF Pro Display;
      color: #ffffff;
    }
  }
</style>